<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .active{
      background-color: pink;
    }
  </style>
  <script src="lib/vue.js"></script>
</head>
<body>
<div id="root">
  <news-list :active-list="activeList" :is-active="isActive" :active-id="activeId" :news-list="newsList"></news-list>
</div>
</body>
<script type="module">
  import newsList from "./components/newsList.js";
  new Vue({
    el : '#root',
    data:{
      activeId : 1,
      newsList:[
        {
          id:1,
          city : '大连',
          list:[
            {
              id:Math.random().toString(36).slice(2),
              content:'大连今天天气阴'
            },
            {
              id:Math.random().toString(36).slice(2),
              content: '金普企业获中国人工智能行业“十大创新力企业奖”'
            },
            {
              id:Math.random().toString(36).slice(2),
              content: '供热单位热态试运行情况总体良好'
            },
            {
              id:Math.random().toString(36).slice(2),
              content: '一线速递｜大连海警局深夜救助海上伤员'
            }
          ]
        },
        {
          id:2,
          city : '南京',
          list:[
            {
              id:Math.random().toString(36).slice(2),
              content:'江苏南京：需求释放结构升级，消费市场涌动“焕新”潮'
            },
            {
              id:Math.random().toString(36).slice(2),
              content: '“开镰米”收割，5名公证员全程在场跟踪记录 大米“贴封条” 扫码可溯源'
            },
            {
              id:Math.random().toString(36).slice(2),
              content: '书香氤氲着城市的街巷肌理——解码南京“最浪漫的生活方式”'
            },
            {
              id:Math.random().toString(36).slice(2),
              content: '“赛事流量”转为“消费增量” 全市重点商圈街区3天交易额26.2亿元'
            }
          ]
        },
        {
          id:3,
          city : '丹东',
          list:[
            {
              id:Math.random().toString(36).slice(2),
              content:'丹东正式开启今冬集中供热！'
            },
            {
              id:Math.random().toString(36).slice(2),
              content: 'G228丹东线威海段成功入选全省2025年度公路安全设施和交通秩序管理精细化提升工程典型案例报部候选清单'
            },
            {
              id:Math.random().toString(36).slice(2),
              content: '让丹东草莓“四季常鲜”'
            },
            {
              id:Math.random().toString(36).slice(2),
              content: '丹东增设14处固定式交通技术监控设备，具体点位公布'
            }
          ]
        },
      ],
      activeList:[
        {
          id:Math.random().toString(36).slice(2),
          content:'大连今天天气阴'
        },
        {
          id:Math.random().toString(36).slice(2),
          content: '金普企业获中国人工智能行业“十大创新力企业奖”'
        },
        {
          id:Math.random().toString(36).slice(2),
          content: '供热单位热态试运行情况总体良好'
        },
        {
          id:Math.random().toString(36).slice(2),
          content: '一线速递｜大连海警局深夜救助海上伤员'
        }
      ]
    },
    components:{
      newsList
    },
    methods:{
      isActive(id){
        this.activeId = id;
      }
    },
    watch:{
      activeId(newValue,oldValue){
        this.activeList = this.newsList[newValue-1].list;
      }
    }
  })
</script>
</html>